<template>
  <ag-grid
    :column-defs="columnDefs"
    :gridOptions="gridOptions"
    :id="tableId"
    :row-data="rows"
    :style="{ height }"
    @cell-context-menu="setSelectedRow"
    @grid-ready="setGridApi"
    row-multi-select-with-click
    row-selection="multiple"
    wrapHeaderText
    :dark="true"
    @first-data-rendered="gridApi?.sizeColumnsToFit()"
    :components="{ buttonRenderer: 'ConfirmButton' }"
    @selection-changed="onSelectionChanged"
  />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

import { useGridApi, useSelectedRow } from 'src/boot/grid';
import AgGrid from 'src/components/ag-grid/index.vue';
import { useFilter } from 'src/components/filter/hooks';
import { Row } from '../models';
import { createColumnDefs, createGridOptions } from './utils';
import ConfirmButton from './confirm-button.vue';

export default defineComponent({
  name: 'main-table',

  components: {
    AgGrid,
    //eslint-disable-next-line vue/no-unused-components
    ConfirmButton,
  },

  props: {
    tableId: {
      type: String,
      required: true,
    },
    height: {
      type: String,
    },
    rows: {
      type: Array,
    },
  },

  setup() {
    const [gridApi, setGridApi] = useGridApi<Row>();
    const [selectedRow, setSelectedRow] = useSelectedRow<Row>();
    const disable = ref(true);

    const onSelectionChanged = (params: any) => {
      const selectedRows = params.api.getSelectedRows();
      if (selectedRows.length > 0) {
        disable.value = false;
      } else {
        disable.value = true;
      }
    };

    const batchConfirm = async () => {
      console.log(111);
    };

    useFilter(gridApi);
    return {
      columnDefs: createColumnDefs(),
      gridOptions: createGridOptions(),
      gridApi,
      setGridApi,
      selectedRow,
      setSelectedRow,
      batchConfirm,
      disable,
      onSelectionChanged,
    };
  },
});
</script>
<style lang="scss" scoped>
// dense模式
// 表格选中的框
.ag-theme-balham,
.ag-theme-balham-dark {
  // 选中后的框
  --ag-checkbox-checked-color: rgb(237, 217, 90);
  // 那个框的背景色
  --ag-background-color: #140e0e;
}
//单选框消失
.ag-theme-balham,
.ag-theme-balham-dark {
  --ag-balham-active-color: rgba(0, 0, 0, 0);
}
</style>
